<template>
  <div class="common-tabs-wrapper">
    <a-tabs type="card" :activeKey="active" @change="tabChange" >
      <a-tab-pane
          style="background: #FFFFFF"
          v-for="(item, index) in gxOption1"
          :tab="item.key_name"
          :key="item.key_value">
        <component
            style="background: #FFFFFF"
            :ref="'pane' + item.key_value"
            :is="item.component"
        ></component>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import Shift from './Shift'
import Set from './Set'
export default {
  components: { Shift, Set},
  data() {
    return {
      active: '1',
      gxOption1: [
        { key_value: '1', key_name: '轮班管理', component: 'Shift' },
        { key_value: '2', key_name: '班制设置', component: 'Set' },
      ],
    }
  },
  methods:{
    tabChange:function(index){
      this.active = index;
    }
  }
}
</script>

<style lang="less">
.common-tabs-wrapper {
  height: 100%;
  margin: 10px;
  .ant-tabs-bar{
    margin: 0;
  }
  .ant-tabs-tab{
    color: #606d86 !important;
    background: #e3e5e9 !important;
    min-width: 110px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border:none !important;
    border-radius: 7px 7px 0 0 !important;
  }
  .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active{
    background: #fff !important;
    color: #252f41 !important;
  }
  .ant-table td { white-space: nowrap; }
}
</style>
